<!--
 * @Author: bln
 * @Date: 2024-08-07 00:00:00
 * @FilePath: dev\pages\law\educationFilm\index.vue
 * @Description: 执法规范-功能列表页面
-->

<template>
  <view class="page">
    <view class="u-page">
      <!-- 搜索栏 -->
      <view class="u-p-t-30">
        <u-search
          shape="round"
          :animation="true"
          :clearabled="true"
          :showAction="true"
          actionText="确定"
          placeholder="请填写搜索关键词"
          v-model="keyWords"
          @custom="handlerSearch"
          class="u-m-l-20 u-m-r-20 u-m-b-30"
        />
      </view>
      <!-- 列表 -->
      <view class="content u-page">
        <me-table :i="0" :index="0" :load-data="loadData" :init-load="false" ref="mescrollItem0">
          <view class="card" slot-scope="d">
            <view class="video">
              <video :src="d.data.url" height="240" :style="{ width: '100%' }" preload="auto" controls></video>
            </view>
            <p class="title">{{ d.data.knowledgeTitle }}</p>
          </view>
        </me-table>
      </view>
    </view>
  </view>
</template>

<script>
import meTable from '@/components/me-table.vue'
import { PATHROOT } from '@/common/path.config'
import queryService from '@/service/query/query.service.js'
import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js'

export default {
  components: { meTable },
	mixins: [MescrollMoreMixin],
  data() {
    return {
      keyWords: '',
      user: this.$store.state.userInfo,
      fileViewUrl: PATHROOT.BASE + '/commonfile/filestore/downloadFile.do'
    }
  },
  mounted() {
    this.fileViewUrl += "?tk=" + this.user.tk + "&fileId="
  },
  methods: {
    // 初始化列表数据
    loadData(page) {
      return queryService.getVideoList({
        page: page.num,
        limit: page.size,
        keyWords: this.keyWords
      }).then(res => {
        if (res.success) {
          res.data.map(item => {
            item.url = this.fileViewUrl + item.fileInfos[0].gfiId
            return item
          })
        }
        return res
      })
    },
    // 列表刷新
    handlerSearch() {
      this.getMescroll(0).triggerDownScroll()
    }
  }
}
</script>

<style lang="scss" scoped>
.video {
  width: 100%;
  padding: 30rpx;
}
.title {
  font-size: 36rpx;
  padding: 10rpx 20rpx;
  color: rgba(0, 0, 0, 0.65);
  border-top: 1px solid #afa5a5;
}
.content {
  background-color: #f3f4f5;
}
.mescroll-body {
  padding-top: 0px!important;
}
</style>